<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        body {
            font-family: Arial;
        }

        * {
            box-sizing: border-box;
        }

        form.example input[type=text] {
            padding: 10px;
            padding-bottom: 7px;
            font-size: 17px;
            border: 1px solid grey;
            float: left;
            width: 80%;
            background: #f1f1f1;
        }

        form.example button {
            float: left;
            width: 20%;
            padding: 10px;
            background: #2196F3;
            color: white;
            font-size: 17px;
            border: 1px solid grey;
            border-left: none;
            cursor: pointer;
        }
        .delete{
            background-color: red;
        }
        form.example button:hover {
            background: #0b7dda;
        }

        form.example::after {
            content: "";
            clear: both;
            display: table;
        }
        .orders{
            margin: auto;
        }

        table {
            margin: 0 auto;
            width: 300px;
            border: 1px solid green;
            border-collapse: collapse;
        }

        th, td {
            text-align: center;
            border-bottom: 1px solid green;

        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .return{
            margin-left: 1000px;
            text-decoration: none;
            color: black;
        }
        th {
            background-color: #f2f2f2;
        }

    </style>
</head>
<body>
<div class="container">
    <form class="example" action="/findOderBylwc" style="margin:auto;max-width:300px">
        <input type="text" placeholder="订单搜索.." name="search" class="search">
        <button type="submit"><i class="fa fa-search"></i></button>
    </form>
    <table style="width: 600px;" class="orders">
        <tr>
            <th colspan="7">您的订单如下</th>
        </tr>
        <tr>
            <td>商品名称</td>
            <td>商品单价</td>
            <td>购买数量</td>
            <td>状态</td>

            <td>操作</td>
        </tr>
            <c:forEach items="${requestScope.orderDetail}" var="book">
        <tr>
            <td>${book.ordersid}</td>
            <td >${book.userid}</td>
            <td >${book.ordersstatus}</td>
            <td>${book.totalprice}</td>
            <td><button><a href="/deletebook?id=${book.ordersid}">删除</a></button></td>
            </c:forEach>
        </tr>
    </table>
    <a href="buyer.jsp" class="return"><h2>返回</h2></a>
</div>

</body>
</html>

